import type { FC } from 'react';
import style from './index.less';
import React, { Fragment, useState, useEffect } from 'react';
import { ArticleColumn } from './service';
import { Link, useHistory } from 'umi';
import ColumnDetail from './components/columnDetail';

interface Props {}

const column: FC<Props> = () => {
  //获取专栏
  const [article, setArticle] = useState([]);
  const getArticle = () => {
    ArticleColumn({ user_id: localStorage.getItem('user_id') }).then(res => {
      console.log(res.data)
      setArticle(res.data);
    });
  };
  //跳转
  const history = useHistory();
  const goToDetail = (index: Number) => {
    console.log('我跳转了',index)
    // history.push(`/client/mine/columnDetail${id}`, { id, user_id });
    history.push(`/client/mine/columnDetail`, {index:index });

  };

  useEffect(() => {
    getArticle();
  }, []);
  return (
    <div className={style.container}>
      {article.map((item, index) => (
        <div 
          className={style.card}
          onClick={() => {
            goToDetail(index);
          }}>
          {/* <div className={style.top}>
            {` | ${item.createdAt.split(' ')[0]} | ${item.type}`}
          </div> */}
          <div className={style.columnName}>
            专栏名称：{item.column}
          </div>
          <div className={style.columnRemark}>
            <div>
              专栏详情：{item.column_detail}
            </div>
            <div>
              专栏创建时间：{item.createdAt}
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};

export default column;
